<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { useIndicatorStore } from "@/stores/indicator"
import { useTopSelectStore } from "@/stores/topSelect"

const indicatorStore = useIndicatorStore()
const topSelectStore = useTopSelectStore()

// 响应式数据
const districts = computed(() => topSelectStore.getArea.map(item => item.label));
const indicators = computed(() => indicatorStore.getIndicatorList.map(item => ({ name: item.name, max: 100 })));

// 模拟各区数据 - 这里可以根据实际API调整
const getDistrictData = () => {
  const colors = ['#4fc3f7', '#ffb300', '#4caf50', '#ff5722', '#9c27b0', '#00bcd4', '#ff9800', '#795548', '#607d8b', '#e91e63', '#3f51b5'];
  let displayDistricts = districts.value;
  const selectedAreas = topSelectStore.getSelectArea;
  displayDistricts = selectedAreas;
  return displayDistricts.map((district, index) => ({
    name: district,
    data: indicators.value.map((item, idx) => {
      // 每个指标生成不同区间的模拟数据
      // 这里只是示例，实际可根据item.name区分区间
      if (idx === 0) return Math.floor(Math.random() * 30) + 70; // 如健康舒适
      if (idx === 1) return Math.floor(Math.random() * 20) + 75; // 如交通便捷
      if (idx === 2) return Math.floor(Math.random() * 15) + 80; // 如环境宜居
      if (idx === 3) return Math.floor(Math.random() * 25) + 70; // 如社会和谐
      if (idx === 4) return Math.floor(Math.random() * 20) + 70; // 如文化繁荣
      if (idx === 5) return Math.floor(Math.random() * 10) + 80; // 如管理有序
      return Math.floor(Math.random() * 20) + 70;
    }),
    color: colors[index % colors.length]
  }));
};

const districtData = ref(getDistrictData());

// 雷达图 option
const option = ref({
  tooltip: {
    trigger: 'item',
    formatter: function(params: any) {
      let text = params.name + '<br/>';
      params.value.forEach((item: any, index: number) => {
        text += `${indicators.value[index].name}: ${item}<br/>`
      })
      return text;
    }
  },
  legend: {
    data: districtData.value.map(item => item.name),
    textStyle: { color: '#fff' }
  },
  radar: {
    indicator: indicators.value.map(item => ({ name: item.name, max: item.max })),
    radius: '55%',
    center: ['50%', '55%'],
    splitArea: { areaStyle: { color: ['rgba(0,42,90,0.3)', 'rgba(0,42,90,0.1)'] } },
    axisLine: { lineStyle: { color: '#00eaff' } },
    splitLine: { lineStyle: { color: '#00eaff', opacity: 0.5 } },
    name: { color: '#fff', fontSize: 14 }
  },
  series: [
    {
      name: '区指标对比',
      type: 'radar',
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: { width: 2 },
      emphasis: {
        lineStyle: { width: 4 }
      },
      data: districtData.value.map((item, idx) => ({
        value: item.data,
        name: item.name,
        areaStyle: { opacity: 0.08 },
        lineStyle: { color: item.color },
        itemStyle: { color: item.color }
      }))
    }
  ]
});

// 更新图表配置
const updateOption = () => {
  districtData.value = getDistrictData();
  option.value.legend.data = districtData.value.map(item => item.name);
  option.value.radar.indicator = indicators.value.map(item => ({ name: item.name, max: item.max }));
  option.value.series[0].data = districtData.value.map((item, idx) => ({
    value: item.data,
    name: item.name,
    areaStyle: { opacity: 0.08 },
    lineStyle: { color: item.color },
    itemStyle: { color: item.color }
  }));
};

watch([topSelectStore, indicatorStore], () => {
  updateOption();
}, {
  deep: true,
  immediate: true
});

onMounted(() => {
  updateOption();
})
</script>

<template>
  <div class="district-compare-scroll">
    <v-chart 
      :option="option" 
      autoresize 
    />
  </div>
</template>

<style scoped lang="scss">
.district-compare-scroll {
  width: 100%;
  height: 100%;
}
</style>
